{extend name="common/base"/}
{block name="slider"}
<!--轮播图开始-->
<div id="jssor_1" style="margin:0 auto;width:780px;height:360px;overflow:hidden;">
    <div data-u="slides" style="width:780px;height:360px;overflow:hidden;">
        <div><img data-u="image" src="/static/images/slide1.jpg" class="lazyload"/></div>
        <div><img data-u="image" src="/static/images/slide2.jpg" class="lazyload"/></div>
        <div><img data-u="image" src="/static/images/slide3.jpg" class="lazyload"/></div>
        <div><img data-u="image" src="/static/images/slide4.jpg" class="lazyload"/></div>
        <div><img data-u="image" src="/static/images/slide5.jpg" class="lazyload"/></div>
    </div>
</div>
{/block}
<!--轮播图结束-->
<!-- 切换图区域 -->
{block name="main"}
    <div class="tab">
        <ul>
            {volist name="categories" id="category" key="k"} {if condition="$k == 1"}
            <li class="tab-item active">{$category['name']}<span>◆</span></li>
            {else /}
            <li class="tab-item">{$category['name']}<span>◆</span></li>
            {/if} {/volist}
        </ul>
    </div>
    <div class="menu">
        {volist name="res" id="items" key="key"}
            {if condition="$key == 2"}
            <div class="main{$key-1} product">
                <ul>
                    {volist name="items" id="item" key="k"}
                    <li>
                        <a href="{:url('food/show/'.$item.id)}"><img src="{$item.image}" alt="" class="lazyload" style="border-radius: 6px"><p>{$item.name}</p></a>
                    </li>
                    {/volist}
                    <div style="clear: both"></div>
                </ul>
            </div>
            {else /}
            <div class="main{$key-1} product" style="display: none;">
                <div class="main">
                    <ul>
                        {volist name="items" id="item" key="k"}
                        <li>
                            <a href="{:url('food/show/'.$item.id)}"><img src="{$item['image']}" alt="" class="lazyload"  data-original="/static/images/lazyload.gif" style="border-radius: 6px"><p>{$item.name}</p></a>
                        </li>
                        {/volist}
                        <div style="clear: both"></div>
                    </ul>
                </div>
            </div>
            {/if}
        {/volist}
    </div>

    <section class="three" id="sec3">



        <!--相关推荐开始-->
        <div class="advice">
            <h3>一周热门</h3>
        </div>
        <div class="hot">
            <div class="hot-1">
                <ul>
                    <li>
                        <a href="hot-1.html"><img src="/static/images/2-1.jpg" alt="" class="lazyload" data-original="/static/images/lazyload.gif"></a> <a href="hot-1.html">
                        <p>银耳莲子汤</p>
                    </a>
                    </li>
                </ul>
            </div>
            <div class="hot-2">
                <ul>
                    <li>
                        <a href="hot-2.html"><img src="/static/images/2-2.jpg" alt="" class="lazyload" data-original="/static/images/lazyload.gif"></a> <a href="hot-2.html">
                        <p>花旗参麦冬养阴汤</p>
                    </a>
                    </li>
                </ul>
            </div>
            <div class="hot-3">
                <ul>
                    <li>
                        <a href="hot-3.html"><img src="/static/images/3-2.jpg" alt="" class="lazyload" data-original="/static/images/lazyload.gif"></a> <a href="hot-3.html">
                        <p>罗汉果瘦肉汤</p>
                    </a>
                    </li>
                </ul>
            </div>
            <div class="hot-4">
                <ul>
                    <li>
                        <a href="hot-4.html"><img src="/static/images/4-2.jpg" alt="" class="lazyload" data-original="/static/images/lazyload.gif"></a> <a href="hot-4.html">
                        <p>大豆芽菜猪血汤</p>
                    </a>
                    </li>
                </ul>
            </div>
            <div class="hot-5">
                <ul>
                    <li>
                        <a href="hot-5.html"><img src="/static/images/5-2.jpg" alt="" class="lazyload" data-original="/static/images/lazyload.gif"></a> <a href="hot-5.html">
                        <p>当归蛋汤</p>
                    </a>
                    </li>
                </ul>
            </div>

        </div>
        <!--相关推荐结束-->
    </section>
{/block}

{block name="js"}
<script>
    $(function () {
        $(".tab>li").mouseenter(function () {
            $(this).addClass("active").siblings("li").removeClass("active");
            $(".menu div").eq($(this).index()).addClass("selected").siblings("div").removeClass("selected");
            // $(this).toggleClass("active").siblings("li").removeClass("active");
            // $(".menu>div").eq($(this).index()).toggleClass("selected").siblings("div").removeClass("selected");
        });
        $('.tab-item').click(function () {
            $(this).addClass('active').siblings().removeClass('active')
            var index = $(this).index();
            $('.main' + (index + 1)).show().siblings().hide()
        });

        $('.searchBtn').click(function() {
            $(this).prev().submit()
        });

        var options = {
            $AutoPlay: 1
        };
        var jssor_1_slider = new $JssorSlider$("jssor_1", options);
    });
</script>
{/block}
